/**
 * @Author:高志斐
 * @Date:2020/7/4
 * @Description:这是开通银行存管页面
 */
import React,{Component} from "react";
import {WingBlank, WhiteSpace, Icon, NavBar, InputItem, Picker, List, Button, Toast} from 'antd-mobile';
import axios from "axios";
import {URL} from "../../index";
import {getCookieId} from "../Login/Component_Login/GetCookie";
//用户选择要绑定的银行卡所属银行
const banks = [
    {
        label: '中国银行',
        value: '中国银行',
    },
    {
        label: '中国工商银行',
        value: '中国工商银行',
    },
    {
        label: '中国建设银行',
        value: '中国建设银行',
    },
    {
        label: '中国邮政储蓄银行',
        value: '中国邮政储蓄银行',
    },
    {
        label: '中信银行',
        value: '中信银行',
    },
    {
        label: '招商银行',
        value: '招商银行',
    },
    {
        label: '平安银行',
        value: '平安银行',
    },
    {
        label: '交通银行',
        value: '交通银行',
    },
    {
        label: '浦发银行',
        value: '浦发银行',
    },
    {
        label: '兴业银行',
        value: '兴业银行',
    }
]
export default class AddBankCard extends Component{
    constructor(props) {
        super(props);
        this.state = {
            //银行预留手机号
            bankPhone:'',
            //银行卡号
            bankCardNum:'',
            //姓名
            realName:'',
            //身份证长度
            card_id_maxLen: 18,
            hasError: false,
            //身份证号
            idCard:'',
            //银行
            bankName:[]
        };
        this.handleLeftClick=this.handleLeftClick.bind(this)
    }
    //顶部导航栏点击返回上一页
    handleLeftClick(event){
        window.history.back(-1)
    }
    //用户真实姓名
    onChangeName = (realName) => {
        this.setState({
            realName
        })
    }
    //输入银行卡预留手机号
    onChangePhone =(bankPhone) =>{
        this.setState({
            bankPhone
        })
    }
    //输入银行卡号
    onChangeCardNum =(bankCardNum) =>{
        this.setState({
            bankCardNum
        })
    }
    //选择银行名称
    onChangeBankName=(bankName) =>{
        this.setState({
            bankName
        })
    }
    //校验身份证号
    onChange = (idCard) => {
        if (idCard.replace(/\s/g, '').length < 18) {
            this.setState({
                hasError: true,
            });
        } else {
            this.setState({
                hasError: false,
            });
        }
        this.setState({
            idCard
        });
    }
    //绑定银行卡
    addBankCardClick(event){
        if (this.state.realName === "" || this.state.realName === null) {
            Toast.info('姓名不能为空', 2);
        } else if (this.state.idCard === 0) {
            Toast.info('身份证号不能为空', 2);
        } else if (this.state.bankCardNum === "") {
            Toast.info('银行卡号不能为空', 2);
        } else if(this.state.bankPhone ===""){
            Toast.info('预留手机号不能为空', 2);
        } else if (this.state.bankName.length === 0) {
            Toast.info('请选择银行', 2);
        } else if(this.state.idCard.length !==18){
            Toast.info('身份证号位数不对', 2);
        } else if(this.state.bankPhone.length !==11){
            Toast.info('手机号位数不对', 2);
        } else if(this.state.bankCardNum.length < 16){
            Toast.info('银行卡号位数应大于等于16位', 2);
        }
            else {
            // //提交数据
            axios({
                    method: "POST",
                    url:URL + "/bankAccount/openBankAccount",
                    data:{
                        userId: getCookieId(),  // 用户id
                        bankAccountPhone: this.state.bankPhone,
                        bankAccountCard: this.state.bankCardNum,
                        userName: this.state.realName,
                        userCard: this.state.idCard,
                        accountBankName: this.state.bankName[0]
                    }
                }
            ).then(res => {
                if (res.data.code === 200) {
                    Toast.success('绑定银行卡成功！');
                    // 绑定成功后跳转到我的银行卡页
                    this.props.history.push("/bankCardDetail")
                } else {
                    console.log(res.data.code)
                    Toast.fail('绑定失败', 2);
                }
            })
        }
    }
    render() {
        return (
            <div>
                {/*顶部导航栏*/}
                <NavBar
                    mode="light"
                    icon={<Icon type="left" style={{color:"#f8a83f"}}/>}
                    onLeftClick={this.handleLeftClick}
                >添加银行卡</NavBar>
                <WhiteSpace />
                <List renderHeader={() => '开通银行存管'}>
                    <InputItem
                        clear
                        placeholder="请输入您的姓名"
                        value={this.state.realName}
                        onChange={this.onChangeName}
                    >姓名</InputItem>
                    <InputItem
                        clear
                        placeholder="请输入您的身份证号"
                        error={this.state.hasError}
                        onChange={this.onChange}
                        value={this.state.idCard}
                        maxLength={this.state.card_id_maxLen}
                    >身份证号
                    </InputItem>
                    <InputItem
                        clear
                        placeholder="请输入您的银行卡号"
                        onChange={this.onChangeCardNum}
                        value={this.state.bankCardNum}
                    >银行卡号
                    </InputItem>
                    <InputItem
                        clear
                        placeholder="请输入银行卡预留手机号"
                        onChange={this.onChangePhone}
                        value={this.state.bankPhone}
                    >预留手机号</InputItem>
                    <Picker
                        data={banks}
                        cols={1}
                        value={this.state.bankName}
                        onChange={v => this.setState({ bankName: v })}>
                        <List.Item arrow="horizontal">银行</List.Item>
                    </Picker>
                </List>
                <WhiteSpace />
                <WhiteSpace />
                <WhiteSpace />
                <WhiteSpace />
                <WhiteSpace />
                <WingBlank size="lg">
                    <Button
                        icon={<img src={require('../../access/images/添加.png')} alt='这是添加图片'/>}
                        onClick={this.addBankCardClick.bind(this)}
                        type="primary">
                        添加
                    </Button>
                </WingBlank>
            </div>
        )
    }
}
